<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理页</title>
  <link rel="stylesheet" href="./../css/bootstrap.css">
  <script src="./../js/jq.js"></script>
  <script src="./../js/bootstrap.js"></script>
  <script>
    $(function (){
      $(".nav-stacked li").click(function (){
        $(".nav-stacked li").removeClass("active")
        $(this).addClass("active")
      })
    })
  </script>
</head>
<body>
  <div class="container">
    <h1>管理界面</h1>
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
      <div class="col-md-2">
        <ul class="nav nav-pills nav-stacked">
          <li role="presentation" class="active"><a target="myframe" href="frames/blogsframe.html">博客列表</a></li>
          <li role="presentation"><a target="myframe" href="frames/usersframe.html">用户列表</a></li>
          <li role="presentation"><a  target="myframe" href="frames/commentsframe.html">评论列表</a></li>
        </ul>
      </div>
      <div class="col-md-10">
        <iframe name="myframe" src="frames/blogsframe.html" width="100%" frameborder="0" height="500px"></iframe>
      </div>
    </div>
  </div>
</body>
</html>